﻿@model IEnumerable<WebApp.Models.CodeItem>
@{
   ViewBag.Title = "键值对维护";
}
<!-- MAIN CONTENT -->
<div id="content">
        <!-- quick navigation bar -->
        <div class="row">
            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
                <h1 class="page-title txt-color-blueDark">
                    <i class="fa fa-table fa-fw "></i>
                    系统管理
                    <span>
                        >
                        键值对维护
                    </span>
                </h1>
            </div>
            <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">

            </div>
        </div>
        <!-- end quick navigation bar -->
        <!-- widget grid -->
        <section id="widget-grid" class="">
            <!-- row -->
            <div class="row">
                <!-- NEW WIDGET START -->
                <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <!-- Widget ID (each widget will need unique ID)-->
                    <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
                        <!-- widget options:
                        usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
                        data-widget-colorbutton="false"
                        data-widget-editbutton="false"
                        data-widget-togglebutton="false"
                        data-widget-deletebutton="false"
                        data-widget-fullscreenbutton="false"
                        data-widget-custombutton="false"
                        data-widget-collapsed="true"
                        data-widget-sortable="false"
                        -->
                        <header>
                            <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                            <h2>键值对维护</h2>
                        </header>

                        <!-- widget div-->
                        <div>
                            <!-- widget edit box -->
                            <div class="jarviswidget-editbox">
                                <!-- This area used as dropdown edit box -->
                            </div>
                            <!-- end widget edit box -->
                            <!-- widget content -->
                            <div class="widget-body no-padding">
                                <div class="widget-body-toolbar">
                                    <div class="row">
                                        <div class="col-sm-8  ">
                                            <div class="btn-group">
                                                <a href="javascript:updatejavascript()" class="btn btn-sm btn-primary"> <i class="fa fa-file-code-o"></i> 更新JS脚本 </a>
                                            </div>
                                            <div class="btn-group">
                                                <a href="javascript:append()" class="btn btn-sm btn-default"> <i class="fa fa-plus"></i> 新增 </a>
                                            </div>
                                            <div class="btn-group">
                                                <a href="javascript:removeit()" class="btn btn-sm btn-default"> <i class="fa fa-trash-o"></i> 删除 </a>
                                            </div>
                                            <div class="btn-group">
                                                <a href="javascript:accept()" class="btn btn-sm btn-default"> <i class="fa fa-floppy-o"></i> 保存 </a>
                                            </div>
                                            <div class="btn-group">
                                                <a href="javascript:reload()" class="btn btn-sm btn-default"> <i class="fa fa-refresh"></i> 刷新 </a>
                                            </div>
                                            <div class="btn-group">
                                                <a href="javascript:reject()" class="btn btn-sm btn-default"> <i class="fa fa-window-close-o"></i> 取消 </a>
                                            </div>
                                            <div class="btn-group">
                                                <button type="button" onclick="importexcel()" class="btn btn-default"><i class="fa fa-upload"></i> 导入数据 </button>
                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="caret"></span>
                                                    <span class="sr-only">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="javascript:importexcel()"><i class="fa fa-upload"></i>  上传Excel </a></li>
                                                    <li role="separator" class="divider"></li>
                                                    <li><a href="javascript:downloadtemplate()"><i class="fa fa-download"></i> 下载模板 </a></li>
                                                </ul>
                                            </div>
                                            <div class="btn-group">
                                                <a href="javascript:exportexcel()" class="btn btn-sm btn-default"> <i class="fa fa-file-excel-o"></i> 导出Excel </a>
                                            </div>
                                            <div class="btn-group">
                                                <a href="javascript:print()" class="btn btn-sm btn-default"> <i class="fa fa-print"></i> 打印 </a>
                                            </div>
                                            <div class="btn-group">
                                                <a href="javascript:dohelp()" class="btn btn-sm btn-default"> <i class="fa fa-question-circle-o"></i> 帮助 </a>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 text-align-right">
                                            <div class="btn-group">
                                                <a href="javascript:window.history.back()" class="btn btn-sm btn-success"> <i class="fa fa-chevron-left"></i> 返回 </a>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="alert alert-warning no-margin fade in">
                                    <button class="close" data-dismiss="alert">
                                        ×
                                    </button>
                                    <i class="fa-fw fa fa-info"></i>
                                    当有新增/修改记录后，请执行【更新javascript】才会最终生效
                                </div>
                                <!--begin datagrid-content -->
                                <div class="table-responsive">
                                    <table id="codeitems_datagrid" >
                                    </table>
                                </div>
                                <!--end datagrid-content -->

                            </div>
                            <!-- end widget content -->
                        </div>
                        <!-- end widget div -->

                    </div>
                    <!-- end widget -->

                </article>
                <!-- WIDGET END -->

            </div>

            <!-- end row -->
        </section>
        <!-- end widget grid -->
        <!-- file upload partial view -->
@Html.Partial("_ImportWindow", new ViewDataDictionary { { "EntityName", "CodeItem" } })
        <!-- end file upload partial view -->

</div>
    <!-- END MAIN CONTENT -->

@section Scripts {
<script type="text/javascript">
            var entityname = "CodeItem";
            //更新javascript
    function updatejavascript() {

        $.post("/CodeItems/UpdateJavascript", null, function (response) {
            if (response.success) {
                $.messager.alert("提示", "更新成功！");

            }
        }, "json").fail(function (response) {
            $.messager.alert("错误", "提交错误了！", "error");

        });
    }

            //下载Excel导入模板
    function downloadtemplate() {
        //TODO: 修改下载模板的路径
        var url = "/ExcelTemplate/Code.xlsx";
        $.fileDownload(url)
            .fail(function () { $.messager.alert("错误", "没有找到模板文件! {" + url + "}"); });

    }
            //打开Excel上传导入
    function importexcel() {
        $("#importwindow").window("open");
    }
            //执行Excel到处下载
    function exportexcel() {
        var filterRules = JSON.stringify($dg.datagrid("options").filterRules);
        //console.log(filterRules);
        $.messager.progress({ title: "正在执行导出！" });
        var formData = new FormData();
        formData.append("filterRules", filterRules);
        formData.append("sort", "Id");
        formData.append("order", "asc");
        $.postDownload("/CodeItems/ExportExcel", formData, function (fileName) {
            $.messager.progress("close");
            console.log(fileName);

        })
    }
            //datagrid 增删改查操作
            var $dg = $("#codeitems_datagrid");
            var editIndex = undefined;
    function reload() {
        if (endEditing()) {
            $dg.datagrid("reload");
        }
    }
            var prevcodetype = "";
            var prevdescription = "";
    function endEditing() {
        if (editIndex === undefined) { return true; }
        if ($dg.datagrid("validateRow", editIndex)) {
            $dg.datagrid("endEdit", editIndex);
            var row = $dg.datagrid("getRows")[editIndex];
            prevcodetype = row.CodeType;
            prevdescription = row.Description;
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field) {
        var _operates = ["_operate1", "_operate2", "_operate3", "ck"];
        if ($.inArray(field, _operates) >= 0) {
            return;
        }
        if (editIndex !== index) {
            if (endEditing()) {
                $dg.datagrid("selectRow", index)
                    .datagrid("beginEdit", index);
                var ed = $dg.datagrid("getEditor", { index: index, field: field });
                if (ed) {
                    ($(ed.target).data("textbox") ? $(ed.target).textbox("textbox") : $(ed.target)).focus();
                }
                editIndex = index;
            } else {
                $dg.datagrid("selectRow", editIndex);
            }
        }
    }
    function append() {
        if (endEditing()) {
            //$dg.datagrid("appendRow", { Status: 0 });
            //editIndex = $dg.datagrid("getRows").length - 1;
            $dg.datagrid("insertRow", {
                index: 0,
                row: { CodeType: prevcodetype, Description: prevdescription, IsDisabled: false }
            });
            editIndex = 0;
            $dg.datagrid("selectRow", editIndex)
                .datagrid("beginEdit", editIndex);
        }
    }
    function removeit() {
        if (editIndex == undefined) { return }
        $dg.datagrid("cancelEdit", editIndex)
            .datagrid("deleteRow", editIndex);
        editIndex = undefined;
    }
    function accept() {
        if (endEditing()) {
            if ($dg.datagrid("getChanges").length) {
                var inserted = $dg.datagrid("getChanges", "inserted");
                var deleted = $dg.datagrid("getChanges", "deleted");
                var updated = $dg.datagrid("getChanges", "updated");
                var effectRow = new Object();
                if (inserted.length) {
                    effectRow.inserted = inserted;
                }
                if (deleted.length) {
                    effectRow.deleted = deleted;
                }
                if (updated.length) {
                    effectRow.updated = updated;
                }
                //console.log(JSON.stringify(effectRow));
                $.post("/CodeItems/SaveData", effectRow, function (response) {
                    //console.log(response);
                    if (response.success) {
                        $.messager.alert("提示", "提交成功！");
                        $dg.datagrid("acceptChanges");
                        $dg.datagrid("reload");
                    }
                }, "json").fail(function (response) {
                    //console.log(response);
                    $.messager.alert("错误", "提交错误了！", "error");
                    //$dg.datagrid("reload");
                });

            }

            //$dg.datagrid("acceptChanges");
        }
    }
            function reject() {
                $dg.datagrid("rejectChanges");
                editIndex = undefined;
            }
            function getChanges() {
                var rows = $dg.datagrid("getChanges");
                alert(rows.length + " rows are changed!");
            }

            //datagrid 开启筛选功能
    $(function () {
        $dg.datagrid({
            rownumbers: true,
            checkOnSelect: true,
            selectOnCheck: true,
            idField: 'Id',
            sortName: 'Id',
            sortOrder: 'desc',
            remoteFilter: true,
            singleSelect: true,
            url: '/CodeItems/GetData',
            method: 'get',
            onClickCell: onClickCell,
            pagination: true,
            striped: true,
            columns: [[
               
                { field: 'CodeType', width: 140, editor: { type: 'textbox', options: { prompt: '代码名称', required: true, validType: 'regex[\'^[A-Za-z0-9]+$\',\'必须是字母\']' } }, sortable: true, resizable: true, title: '@Html.DisplayNameFor(model => model.CodeType)' },
                { field:'Code' ,width:140,editor:{type:'textbox',options:{prompt:'值' ,required:true ,validType:'length[0,50]'  }  } ,sortable:true,resizable:true,title:'@Html.DisplayNameFor(model => model.Code)' },
                { field: 'Text', width: 140, editor: { type: 'textbox', options: { prompt: '显示', required: true, validType: 'length[0,50]' } }, sortable: true, resizable: true, title: '@Html.DisplayNameFor(model => model.Text)' },
                { field:'Multiple' ,width:140,editor:{type:'booleaneditor',options:{prompt:'是否支持多选' ,required:true  }  } ,sortable:true,resizable:true,formatter:booleanformatter,title:'@Html.DisplayNameFor(model => model.Multiple)' },
                { field:'Description' ,width:140,editor:{type:'textbox',options:{prompt:'描述' ,required:true ,validType:'length[0,80]'  }  } ,sortable:true,resizable:true,title:'@Html.DisplayNameFor(model => model.Description)'},
                { field: 'IsDisabled', width: 100, align: 'right', editor: { type: 'isdisablededitor', options: { prompt: '是否禁用', required: true } }, sortable: true, resizable: true, formatter: isdisabledformatter, title: '@Html.DisplayNameFor(model => model.IsDisabled)' }
            ]]

        });
        $dg.datagrid("enableFilter", [

            {
                field: "Id",
                type: "numberbox",
                op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
            },
            {
                field: "IsDisabled",
                type: "isdisabledfilter",

            },
            {
                field: "Multiple",
                type: "booleanfilter",

            }






        ]);
    });
            //-----------------------------------------------------
            //datagrid onSelect
            //-----------------------------------------------------
    function showdetailsformatter(value, row, index) {

        return '<a onclick="showDetailsWindow(' + row.Id + ')" class="link" href="javascript:void(0)">查看明细</a>';

    }
            //弹出明细信息
    function showDetailsWindow(id) {
        //console.log(index, row);
    }




</script>
<script src="~/Scripts/jquery.filerupload.min.js"></script>
}


